<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文章详细</title>
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../../css/utils.css" />
		<link rel="stylesheet" href="../../css/simple-line-icons.css">
		<link rel="stylesheet" href="../../css/mui-ext.css">
		<style>
			.arttitle{
				font-size: 18px; 
				line-height: 130%; 
				color: #303030;
				word-spacing: 8px; 
				letter-spacing: 1px;
			}
			.supplement{
				font-size: 13px; 
				color: #909090; 
				margin: 10px 0px 2px 0px;
				height: 30px;
			}
			
			.artcontent{
				margin: 2px 0px 2px 0px; 
				font-size: 15px; 
				line-height: 170%; 
				color: #909090;
			}
			
			#artContent img{
				width: 100%;
			}
			
			#artContent p{
				font-size: 15px;
				line-height: 170%;
				color: #303030;
				word-spacing: 8px; 
				letter-spacing: 1px;
				font-family: "黑体";
				margin-top: 24px;
				text-align: justify;
				text-justify: inter-ideograph;
			}
			
			#artContent iframe{
				width: 100%;
			}
		</style>
	</head>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/utils/http.utils.js"></script>
	<script src="../../js/bus/pubfun.js"></script>
	<script>
		var $artid = getQueryString(window.location.search, "artid");
		var $currLoginUser = JSON.parse(localStorage.getItem("login-user-parent"));
		var $usreId = "";
		window.onload = function(){
			getArtDetailsById();
			loadArtCommLst(30, 0);
		}
		
		function getArtDetailsById(){
			mui.ajax({
				url : $request_url.getArticleByInfo,
				type : "get",
				headers: {
					"Authorization": $headers_authorization
				},
				dataType : "json",
				data : {
					id : $artid
				}, 
				success : function(dat){
					if(dat.code == 0){
						if(dat.result != null && dat.result != ""){
							var $author = "";
							if(dat.result.author != null && dat.result.author != ""){
								$author = dat.result.author;
							}
							document.getElementById("artTitle").innerHTML = dat.result.title;
							document.getElementById("artAuthor").innerHTML = '<img src="img/345LOGO.png" />' + $author;
							//document.getElementById("artAuthor").appendChild(document.createElement("span").innerHTML = $author);
							document.getElementById("artPageviews").innerHTML = '<img src="img/read.png" style="width: 16px;"/>&nbsp;' + dat.result.readCount;
							document.getElementById("artContent").innerHTML = dat.result.content;
							document.getElementById("pubtime").innerHTML = stringConTime(dat.result.publishDate, "ymd");
						} else {
							mui.toast("暂无数据...");
						}
					} else {
						mui.toast(dat.message);
					}
				}, error : function(err){
					mui.toast("服务繁忙...");
				}
			});
		}
	</script>
	<body>
		<div class="mui-content" style="background-color: white;">
			<div id="artcontent" style="margin: 0px 20px 0px 20px;">
				<div id="dvtitle" style="margin-top: 10px;">
					<span id="artTitle" class="arttitle">
						
					</span>
				</div>
				
				<div style="font-size: 13px; color: #909090; float: left; margin-top: 5px;">
					<span id="artAuthor" style="color: #909090;">
					</span>
				</div>
				<br />
				<div class="supplement">
					<div style="float: left;">
						<span id="pubtime"></span>
					</div>
					<div style="float: right;" >
						<span id="artPageviews"></span>
					</div>
				</div>
				
				<div id="artContent" class="artcontent">
				</div>
			</div>
			<div id="artComment" style="margin-top: 10px;">
				<div style="margin-top: 5px;">
					<hr style="width: 100%; height: 1px; background-color: #F1F1F1;" />
				</div>
				
				<div id="artcomlst" style="margin-top: 5px; margin-left: 15px;" >
					
				</div>
			</div>
		</div>
		<br /><br /><br /><br />
		<nav class="mui-bar mui-bar-tab">
			<form class="mui-input-group" style="padding: 5px;">
				<div class="mui-row">
					<div class="mui-col-xs-10">
						<input type="text" placeholder="说说..." id="txtComment">
					</div>
					<div class="mui-col-xs-2">
						<button id="btnAddComment" type="button" class="mui-btn mui-btn-default" style="min-width:40px;top:2px;" onclick="return false;">评论</button>
					</div>
				</div>
			</form>
		</nav>
	</body>
	<script>
		document.getElementById("btnAddComment").addEventListener("tap", function(){
			
			if($currLoginUser == null || $currLoginUser == ""){
				mui.toast("用户尚未登录，不能评论");
				return;
			}
			
			var $txtComment = document.getElementById("txtComment").value;
			if($txtComment == null || $txtComment == ""){
				mui.toast("请输入评论内容");
				return;
			}
			
			mui.ajax({
				url : $request_url.addArtComment,
				type : "post",
				headers: {
					"Authorization": $headers_authorization
				},
				dataType : "json",
				data : {
					userId : $currLoginUser.userId,
					objectType : "article",
					destObjectId : $artid,
					commentContent : $txtComment
				}, 
				success : function(dat){
					if(dat.code == 0){
						if(dat.result != null && dat.result != ""){
							var $commDiv = document.createElement("div");
							$commDiv.innerHTML = addArtCommHtmlTem(dat.result);
							document.getElementById("artcomlst").appendChild($commDiv);
							document.getElementById("txtComment").value = "";
						}
					}
				}, error : function(err){
					
				}
			});
		});
		
		/**
		 * 加载评论内容
		 */
		function loadArtCommLst($size, $page){
			mui.ajax({
				url : $request_url.getCommentLst,
				type : "get",
				headers: {
					"Authorization": $headers_authorization
				},
				dataType : "json",
				data : {
					destObjectId : $artid,
					objectType : "article",
					rows : $size,
					page : $page
				}, 
				success : function(dat){
					if(dat.code == 0){
						if(dat.result != null && dat.result != ""){
							var $artcomDoc = document.getElementById("artcomlst");
							for(var i = 0; i < dat.result.length; i ++){
								var $comDiv = document.createElement("div");
								$comDiv.innerHTML = artCommLstHtmlTem(dat.result[i], i);
								$artcomDoc.appendChild($comDiv);
							}
						}
					} else {
						
					}
				}, error : function(err){
					
				}
			});
		}
		
		/*
		 * 评论内容模板
		 */
		function artCommLstHtmlTem($art, $num){
			var $nickName = "";
			var $uicon = "";
			if($art.commentUser.nickName == null || $art.commentUser.nickName == ""){
				$nickName = "无名氏";
			} else {
				$nickName = $art.commentUser.nickName;
			}
			
			if($art.commentUser.faceImage == null || $art.commentUser.faceImage == ""){
				$uicon = "../../img/grzx/touxiang_07.png";
			} else {
				$uicon = $art.commentUser.faceImage;
			}
		
			var $commHtml = 
			'<div style="display: flex; width: 100%; margin: 2px 0px 2px 0px;">'
			+	'<div style="width: 16%; margin-left: 10px;">'
			+		'<img src="'+ $uicon +'" style="width: 40px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px;" />'
			+	'</div>'
			+	'<div style="width: 84%; margin-left: -5px;">'
			+		'<span style="font-size: 12px; color: #909090; display: block;">'+ $nickName +'</span>'
			+		'<span style="font-size: 10px; color: #909090; display: block; float:right; margin-right:20px;">'+ $art.commentTimeDiff +'</span>'
			+		'<span style="display: block; font-size: 13px; color: #303030; margin: 5px 0px 0px 0px;">'+ $art.content +'</span>'
			+	'</div>'
			+'</div>'
			+'<hr style="background-color: #F1F1F1; width: 100%; height: 1px;" />';
			return $commHtml;
		}
		
		/**
		 * 添加评论内容模板
		 */
		function addArtCommHtmlTem($art){
			var $nickName = "";
			var $uicon = "";
			if($art.commentUser.nickName == null || $art.commentUser.nickName == ""){
				$nickName = "无名氏";
			} else {
				$nickName = $art.commentUser.nickName;
			}
			
			if($art.commentUser.faceImage == null || $art.commentUser.faceImage == ""){
				$uicon = "../../img/grzx/touxiang_07.png";
			} else {
				$uicon = $art.commentUser.faceImage;
			}
			
			var $addAcHtml = 
			'<div style="display: flex; width: 100%; margin: 2px 0px 2px 0px;">'
			+	'<div style="width: 16%; margin-left: 10px;">'
			+		'<img src="'+ $uicon +'" style="width: 40px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px;" />'
			+	'</div>'
			+	'<div style="width: 84%; margin-left: -5px;">'
			+		'<span style="font-size: 12px; color: #909090; display: block;">'+ $nickName +'</span>'
			+		'<span style="font-size: 10px; color: #909090; display: block; float:right; margin-right:20px;">'+ $art.commentTimeDiff +'</span>'
			+		'<span style="display: block; font-size: 13px; color: #303030; margin: 5px 0px 0px 0px;">'+ $art.content +'</span>'
			+	'</div>'
			+'</div>'
			+'<hr style="background-color: #F1F1F1; width: 100%; height: 1px;" />';
			return $addAcHtml;
		}
		
	</script>
</html>
